<template>
    <div class="root">
        <div class="top-1">
            <router-link :to="'/pin'">
                <div class="box">
                    <img src="../assets/a.png" />
                    <br>
                    <span> 良品购</span>
                </div>
            </router-link>
            <router-link :to="'/shangdian'">
                <div class="box">
                    <img src="../assets/b.png" />
                    <br>
                    <span> 商店</span>
                </div>
            </router-link>
            <router-link :to="'/caipu'">
                <div class="box">
                    <img src="../assets/c.jpg" />
                    <br>
                    <span>美食菜谱 </span>
                </div>
            </router-link>
            <router-link :to="'/jiaju'">
                <div class="box">
                    <img src="../assets/d.png" />
                    <br>
                    <span>家居生活 </span>
                </div>
            </router-link>
        </div>
        <div class="bottom-1">
            <router-link :to="'/bizhi'">
                <div class="box">
                    <img src="../assets/e.jpg" />
                    <br>
                    <span>壁纸 </span>
                </div>
            </router-link>
            <router-link :to="'/touxiang'">
                <div class="box">
                    <img src="../assets/f.jpg" />
                    <br>
                    <span>头像 </span>
                </div>
            </router-link>
            <router-link :to="'/biaoqing'">
                <div class="box">
                    <img src="../assets/g.png" />
                    <br>
                    <span>表情 </span>
                </div>
            </router-link>
            <router-link :to="'/fenlei'">
                <div class="box">
                    <img src="../assets/a.png" />
                    <br>
                    <span>更多分类 </span>
                </div>
            </router-link>
        </div>
    
    </div>
</template>
<script>
export default {

}
</script>
<style scoped>
router-link {
    border: 1px solid black;
    width: 20%;
}

.top-1 {
    display: flex;
    border-bottom: 0.5px solid #E6E6E6;
    border-right: 0.5px solid #E6E6E6;
}

.bottom-1 {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 0.5px solid #E6E6E6;
}

a {
    width: 25%;
    text-decoration: none;
    box-sizing: border-box;
    text-align: center;
    padding: 10px;
    border-right: 0.5px solid #E6E6E6;
}
</style>
